<template>
  <div>
    <ul>
      <li @click="toshoping">
        <div class="logou">
          <img :src="basurl + obj.image_path" alt="" />
        </div>
        <div class="shop_right">
          <div class="shop_right_header">
            <h4>{{ obj.name }}</h4>
            <h6><span>保</span><span>准</span><span>票</span></h6>
          </div>
          <div class="shop_right_center">
            <h5>
              <van-rate
                v-model="obj.rating"
                :size="14"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                readonly
              />
              <span>{{ obj.rating }}</span
              ><i>月售106单</i>
            </h5>
            <p><span>蜂鸟专送</span> <i>准时达</i></p>
          </div>
          <div class="shop_right_foot">
            <span>￥20起送/{{ obj.piecewise_agent_fee.tips }}</span>

            <h6>
              <span>{{ obj.distance }}</span
              ><i>{{ obj.order_lead_time }}</i>
            </h6>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    obj: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      basurl: "//elm.cangdu.org/img/",
    };
  },
  methods: {
    toshoping() {
      this.$router.push({
        path: "/goodShoping",
        query: {
          shopid: this.obj.id,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
ul {
  display: flex;
  li {
    width: 100%;
    display: flex;

    padding: 16.8px 9.6px;
    .logou {
      width: 64.8px;
      height: 64.8px;
      margin-right: 5px;
      flex: 1;
      img {
        width: 64.8px;
        height: 64.8px;
        display: block;
        margin-right: 0.4rem;
      }
    }
    .shop_right {
      width: 100%;
      .shop_right_header {
        display: flex;
        justify-content: space-between;
        h4 {
          width: 150px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 700;

          &::before {
            content: "品牌";
            margin-right: 5px;
            font-size: 14px;
            background-color: #ffd930;
          }
        }
        h6 {
          font-size: 12px;
          span {
            margin: 0 3px;
          }
        }
      }

      .shop_right_center {
        margin-top: 10px;
        display: flex;
        font-size: 14px;
        justify-content: space-between;
        h5 {
          font-size: 12px;
          .van-rate {
            margin-right: 3px;
          }
          span {
            color: #ff9a0d;
            margin-right: 3px;
          }
        }
        p {
          font-size: 12px;
          span {
            background-color: #3190e8;
            color: #fff;
          }
          i {
            background-color: #fff;
            color: #3190e8;
            border: 1px solid #3190e8;
          }
        }
      }
      .shop_right_foot {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        margin-top: 12px;

        h6 {
          span {
            color: #c1bbb9;
          }
          i {
            color: #7baceb;
          }
        }
      }
    }
  }
}
</style>